Que vous soyez débutant, de la vieille école ou simplement sur un petit projet, vous n’avez pas forcément mis en place des solutions qui synchronisent automatiquement votre navigateur à chaque sauvegarde. Il existe pourtant un module npm qui peut se charger de cela à l’aide d’une seule ligne de commande : Browsersync.
\nSi npm est déjà installé sur votre ordinateur, vous pouvez passer directement à la partie suivante
\nnpm, ou Node Package Manager est le gestionnaire de paquet officiel de node.js, la plateforme qui nous permet aujourd’hui d’exécuter du javascript côté serveur. npm permet de gérer très simplement les dépendances d’un site web et d’automatiser certaines tâches récurrentes, dont cette fameuse synchronisation de navigateur.
\nPour utiliser Browsersync vous devez donc tout d’abord installer Node.js (disponible sur Windows, Mac et Linux), qui embarque automatiquement npm.
\nPour l’installation de Browsersync, deux options s’offrent à vous : l’installer globalement afin de pouvoir le lancer sur tous vos projets, ou localement pour un usage ponctuel.
\nJ’ai personnellement choisi l’installation globale, pour simplifier le processus et éviter d’avoir à le télécharger à chaque fois (parce que la planète).
\nPour ce faire, il vous faut donc ouvrir un terminal (ex : l’Invite de commandes sur windows) et exécuter la ligne de commande ci-dessous :
\nnpm install -g browser-syncUne des forces de Browsersync est qu’il peut être utilisé sur un site statique ou dynamique avec des changements mineurs sur la commande utilisée. Dans les deux cas, il vous suffit d’ouvrir un terminal dans le répertoire du projet que vous souhaitez surveiller et d’exécuter la commande appropriée :
\nPour un site sans serveur dynamique (basé sur des fichiers .html), utilisez :
\nbrowser-sync start --server --files=\"**/*\"Browsersync lancera alors un petit serveur et surveillera les modifications de tous vos fichiers. Il est possible de changer certaines options, notamment la partie --files="**/*". Par exemple, si vous souhaitez surveiller uniquement le css, utilisez --files="css/*.css".
Voir toutes les options possibles dans la documentation
\nPour un site qui tourne déjà sur un serveur dynamique local (php et autres), utilisez :
\nbrowser-sync start --proxy \"[URL-LOCALE-DU-PROJET]\" --files=\"**/*\"Browsersync entrera donc en mode proxy et se contentera de faire l’intermédiaire pour surveiller vos fichiers sans lancer de nouveau serveur. Comme pour les sites statiques, cette commande peut être personnalisée : Voir toutes les options possibles.
\nPour résumer, voici les étapes nécessaires à la mise en place d’une synchronisation de navigateur avec Browsersync :
\nnpm install -g browser-syncNaviguer dans le répertoire de votre projet et lancer Browsersync avec l’une des commandes suivantes :
\nbrowser-sync start --server --files="**/*"browser-sync start --proxy "[URL-LOCALE-DU-PROJET]" --files="**/*"Une fois la synchronisation lancée, vous n’avez plus à vous soucier de recharger votre navigateur, il s’en chargera automatiquement à chaque fois que vous sauvegardez !
\nIl existe d’autres façons d’utiliser Browsersync, notamment avec Gulp ou Grunt, mais cette solution est à mon avis la plus simple et la plus rapide à mettre en place lorsque l’on ne cherche pas à mettre en place un workflow complexe.
\nPour plus d’informations sur les autres possibilités d’installation et les options disponibles, visitez la documentation
","frontmatter":{"title":"Comment synchroniser automatiquement votre navigateur avec Browsersync","date":"04 janv. 2020","description":"Augmentez votre productivité en développement web grâce à Browsersync, qui mettra automatiquement à jour votre navigateur à chaque sauvegarde","tags":["workflow","ligne de commande"],"serie":null}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/synchroniser-automatiquement-navigateur/","previous":null,"next":{"fields":{"slug":"/smooth-scrolling-css/"},"frontmatter":{"title":"Smooth scrolling uniquement en CSS","tags":["css"]}}}}}